<div class="card bg-base-100 my-8">
  <div class="card-body">
    <h2 class="card-title">
      <%= t(".title") %>
    </h2>

    <%= turbo_frame_tag "survey_form" do %>
      <%= form_with url: survey_responses_path, method: :post, class: "space-y-6" do |f| %>
        <fieldset class="fieldset ">
          <legend class="fieldset-label"><%= t(".team_size") %></legend>

          <div class="flex flex-wrap gap-4">
            <%
              [
                {
                  label: t(".answer_labels.team_size.one"),
                  value: "1"
                },{
                  label: t(".answer_labels.team_size.one_to_ten"),
                  value: "1-to-10"
                },{
                  label: t(".answer_labels.team_size.ten_plus"),
                  value: "10+"
                }
              ].each do |option|
            %>
              <label class="label">
                <%= radio_button_tag :team_size,
                  option[:value],
                  false,
                  class: "radio radio-primary radio-sm" %>
                <%= option[:label] %>
              </label>
            <% end %>
          </div>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-label"><%= t(".utilization_context") %></legend>
          <div class="flex flex-wrap gap-4">
            <%
              [
                {
                  label: t(".answer_labels.utilization_context.personal_projects"),
                  value: "personal_projects"
                },{
                  label: t(".answer_labels.utilization_context.work_software_development"),
                  value: "work_software_development"
                },{
                  label: t(".answer_labels.utilization_context.work_it_related"),
                  value: "work_it_related"
                },{
                  label: t(".answer_labels.utilization_context.work_other_areas"),
                  value: "work_other_areas"
                }
              ].each do |option|
            %>
              <label class="label">
                <%= radio_button_tag :utilization_context,
                  option[:value],
                  false,
                  class: "radio radio-primary radio-sm" %>
                <%= option[:label] %>
              </label>
            <% end %>
          </div>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-label"><%= t(".usage_purposes") %></legend>
          <div class="flex flex-wrap md:gap-8">
            <%
              [{
                  label: t(".answer_labels.usage_purposes.project_management"),
                  value: "project_management"
                },
                {
                  label: t(".answer_labels.usage_purposes.time_tracking"),
                  value: "time_tracking"
                },{
                  label: t(".answer_labels.usage_purposes.focus"),
                  value: "focus"
                }
              ].each do |option|
            %>
              <label class="label">
                <%= check_box_tag 'usage_purposes[]',
                  option[:value],
                  false,
                  class: "checkbox checkbox-sm checkbox-primary" %>
                <%= option[:label] %>
              </label>
            <% end %>
          </div>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-label"><%= t(".how_did_you_found_us") %></legend>
          <div class="flex flex-wrap gap-4">
            <%
              [
                {
                  label: t(".answer_labels.how_did_you_found_us.reddit"),
                  value: "reddit"
                },{
                  label: t(".answer_labels.how_did_you_found_us.search_engine"),
                  value: "search_engine"
                },{
                  label: t(".answer_labels.how_did_you_found_us.social_media"),
                  value: "social_media"
                },{
                  label: "Website",
                  value: "website"
                },{
                  label: t(".answer_labels.how_did_you_found_us.other"),
                  value: "other"
                }
              ].each do |option|
            %>
              <label class="label">
                <%= radio_button_tag :how_did_you_found_us,
                  option[:value],
                  false,
                  class: "radio radio-primary radio-sm",
                  "onclick": "document.getElementById('how-did-you-found-us-details').style.display = 'block';"
                %>
                <%= option[:label] %>
              </label>
            <% end %>
          </div>
        </fieldset>

        <div id="how-did-you-found-us-details" style="display: none;" class="fieldset">
          <label class="fieldset-label">
            <%= t(".how_did_you_found_us_please_elaborate") %>
          </label>
          <%= text_field_tag :how_did_you_found_us_details, nil, class: "input", placeholder: "Tell us more..." %>
        </div>

        <div class="fieldset">
          <label class="fieldset-label">
              <i class="ti ti-mail"></i>
              <%= t(".share_your_contact_details") %>
          </label>
          <%= f.email_field :contact_email, class: "input", placeholder: "your@email.com" %>
        </div>

        <%= f.submit t('.submit_answers'), class: "btn btn-primary" %>
      <% end %>
    <% end %>
  </div>
</div>